<template>
  <div>
    <h1>HOME</h1>
    <div>
      <button @click="toNews">新闻</button>
      <button @click="toMusic">音乐</button>
      <button @click="toGame">游戏</button>
    </div>
    <div>
      <button @click="toNewsReplace">新闻Replace</button>
      <button @click="toMusicReplace">音乐Replace</button>
      <button @click="toGameReplace">游戏Replace</button>
    </div>
    <div>
      <button @click="$router.go(-2)">回退2</button>
      <button @click="$router.back()">后退1</button>
      <button @click="$router.forward()">前进1</button>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:"Home",
    /* 
    //编程式路由导航中重复导航抛出错误的处理方式：
      1. 因为push或者replace方法只书写第一个参数location的时候，则会返回promise实例，我们直接使用catch(()=>{})处理即可。
      2. push或者replace可以接受第二个和第三个参数，都是回调函数，用来处理成功和失败。
  
  */
    methods:{
      toNews(){
        const result = this.$router.push(
        //方式2：
        "/home/news",
        ()=>{},
        ()=>{}
        );
        console.log(result,this);
        //方式1：
        //result.catch(()=>{});
      },
      toMusic(){
        this.$router.push("/home/music");
      },
      toGame(){
        this.$router.push({
          name:"Game",
        });
      },
      toNewsReplace() {
      this.$router.replace("/home/news");
    },
    toMusicReplace() {
      this.$router.replace("/home/music");
    },
    toGameReplace() {
      this.$router.replace("/home/game");
    },
    }
};
</script>

<style>

</style>